$(function () {
  getlink()
  // 展示分类渲染函数
  function getlink() {
    $.ajax({
      type: 'get',
      url: '/admin/links',
      success(res) {
        if (res.status !== 0) {
          return layui.layer.msg(res.message, { icon: 5 })
        }
        var htmlStr = template("link-tpl", res)
        $('tbody').html(htmlStr)
      }
    })
  }
  var indexAdd = null
  var file = null
  // 点击添加链接按钮触发的事件
  $('#add-link').on('click', function (e) {
    indexAdd = layui.layer.open({
      type: 1,
      title: '添加链接',
      area: ['600px', '400px'],
      content: $('#add-form-tpl').html()
    })
    // 改变图片路径显示图片
    $('#linkFile').on('change', function () {
      var fileList = this.files
      file = fileList[0]
      var NewImgUrl = URL.createObjectURL(file)
      $('#preIcon').attr('src', NewImgUrl)
    })
    // 点击上传图片按钮出现文件夹
    $('#urlIcon').on('click', function () {
      $('#linkFile').click()
    })
    // 提交表单的数据添加到服务器
    $('#add-form').on('submit', function (e) {
      e.preventDefault()
      var fd = new FormData(this)
      getlinkadd(fd)
    })
    // 上传服务器并渲染页面的函数
    function getlinkadd(fd) {
      $.ajax({
        type: 'post',
        url: '/admin/links',
        contentType: false,
        processData: false,
        data: fd,
        success(res) {
          console.log(res);
          if (res.status !== 0) {
            return layui.layer.msg(res.message, { icon: 5 })
          }
          layui.layer.msg(res.message, { icon: 6 })
          layui.layer.close(indexAdd)
          getlink()
        }
      })
    }
  })
  // 点击编辑按钮触发的事件
  var indexEdit = null
  var id = null
  $('tbody').on('click', '.edit', function () {
    // 点击编辑打开编辑窗口
    id = $(this).attr('data-id')
    indexEdit = layui.layer.open({
      type: 1,
      title: '编辑链接',
      area: ['600px', '400px'],
      content: $('#edit-form-tpl').html()
    })
    // 改变图片路径让图片显示
    $('body').on('change', '#linkFile', function () {
      var fileList = this.files
      file = fileList[0]
      var NewImgUrl = URL.createObjectURL(file)
      $('#preIcon').attr('src', NewImgUrl)
    })
    $('#urlIcon').on('click', function () {
      $('#linkFile').click()
    })
    geteditlink()
  })
  // 点击重置返回到原来就有的数据
  $('body').on('click', '#edit-reset', function (e) {
    e.preventDefault();
    geteditlink()
  })
  // 渲染数据到编辑表单的函数
  function geteditlink() {
    $.ajax({
      method: 'get',
      url: '/admin/links/' + id,
      success(res) {
        layui.form.val('editForm', res.data)
        $('#preIcon')
          .attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
      }
    })
  }
  // 提交编辑表单并上传数据到服务器
  $('body').on('submit', '#edit-form', function (e) {
    e.preventDefault()
    var fd = new FormData(this)
    fd.append('linkicon', file)
    $.ajax({
      type: 'PUT',
      url: '/admin/links/' + id,
      contentType: false,
      processData: false,
      data: fd,
      success(res) {
        if (res.status !== 0) {
          return layui.layer.msg(res.message, { icon: 5 })
        }
        layui.layer.msg(res.message, { icon: 6 })
        getlink()
        layui.layer.close(indexEdit)
      }
    })
  })
  // 点击删除按钮触发的事件
  $('tbody').on('click', '.delete', function () {
    var id = $(this).attr('data-id')
    layui.layer.confirm('您确定删除此分类吗？', { icon: 3, title: '提示' }, function (index) {
      $.ajax({
        type: 'DELETE',
        url: '/admin/links/' + id,
        success(res) {
          console.log(res);
          if (res.status !== 0) {
            return layui.layer.msg(res.message, { icon: 5 })
          }
          layui.layer.msg(res.message, { icon: 6 })
          getlink()
        }
      })
      layui.layer.close(index)
    })
  })
})